<template>
	<view>
		<view class="item">
			<view class="label">姓名：</view>
			<input v-model="formData.name" placeholder="请输入" />
		</view>
		<view class="item">
			<view class="label">性别：</view>
			<view class="item-radio">
				<radio-group>
					<label v-for="item in radioGroup" :key="item" class="it-radio">
						<radio :value="item" :checked="item==activeRadio" />{{item}}
					</label>
				</radio-group>
			</view>
		</view>
		<view class="item">
			<view class="label">出生日期：</view>
			<picker mode="date" @change="bindDateChange">
				<view class="d-flex">
					<view>{{formData.birthDate || '请选择'}}</view>
					<uni-icons type="right" color="#999999"></uni-icons>
				</view>
			</picker>
		</view>
		<view class="item">
			<view class="label">民族：</view>
			<picker title="选择您的民族" :range="familydata" :value='index' @change="bindFamilyChange">
				<view>{{formData.nameFamily || '请选择'}}</view>
			</picker>
		</view>
		<view class="item">
			<view>文化程度：</view>
			<picker title="选择您的文化程度" @change="bindCultureChange" :range="culturedata" :value='index'>
				<view class="d-flex">
					<view>{{formData.nameFamily || '请选择'}}</view>
					<uni-icons type="right" color="#999999"></uni-icons>
				</view>
			</picker>
		</view>
		<view class="item">
			<view>职业：</view>
			<input v-model="formData.occupation" placeholder="请输入" />
		</view>
		<view class="item">
			<view class="label">国籍：</view>
			<picker :range="countrydata" title="选择您所在的国籍" :value='nationalityIndex' @change="bindCountryChange">
				<view class="d-flex">
					<view>
						{{formData.nationality || '请选择'}}
					</view>
					<uni-icons type="right" color="#999999"></uni-icons>
				</view>
			</picker>
		</view>
		<view class="item">
			<view class="label">住址：</view>
			<picker @change="handleAddrConfirm" mode="multiSelector" range-key="label" title="选择省/市/区" :range="columns"
				:value='index' @columnchange="changeHandler">
				<view class="d-flex">
					<view>
						{{formData.addr || '请选择'}}
					</view>
					<uni-icons type="right" color="#999999"></uni-icons>
				</view>
			</picker>
		</view>
		<view class="item">
			<view class="label">详细地址：</view>
			<input placeholder="请输入" />
		</view>
		<view class="item">
			<view class="label">身份证号：</view>
			<input type="idcard" maxlength="18" v-model="formData.idNumber" placeholder="请输入" />
		</view>
		<view class="item">
			<view class="label">联系手机号：</view>
			<input v-model="formData.phone" placeholder="请输入" />
		</view>
		<view class="item">
			<view>已遗嘱人关系：</view>
			<picker @change="bindPickerChange" :value="index" :range="array">
				<view class="d-flex">
					<view>{{array[index] || '请选择'}}</view>
					<uni-icons type="right" color="#999999"></uni-icons>
				</view>
			</picker>
		</view>
	</view>
</template>

<script>
	export default {
		name: "basisForm",
		data() {
			return {
				area: require("@/assets/js/area.js").default,
				city: require("@/assets/js/city.js").default,
				columns: [require("@/assets/js/province.js").default, [],
					[]
				],
				culturedata: ['研究生'],
				array: ['本人', '母子', '母女', '亲戚', '朋友'],
				activeRadio: '男',
				radioGroup: ['男', '女'],
				familydata: ['汉族', '满族', '蒙古族', '回族', '苗族', '傣族', '黎族'],
				countrydata: ['中国', '美国', '英国', '加拿大', '日本', '法国'],
				index: '',
				nationalityIndex: '',
				formData: {
					name: '',
					idNumber: '',
					nationality: '',
					relationship: '',
					birthDate: '',
					nameFamily: '',
					addr: '',
					occupation: '',
					nationality: ''
				},
				cityIndex: '',
				areaIndex: '',

			};
		},
		onLoad() {},

		methods: {
			getFormData() {
				// return this.formData
				console.log(123);
			},
			getData() {
				this.columns[1] = this.city[0]
				this.columns[2] = this.area[0][0]
			},
			changeHandler(e) {
				if (e.detail.column == 0) {
					this.cityIndex = e.detail.value
				}
				if (e.detail.column == 1) {
					this.areaIndex = e.detail.value
				}
				let columnIndex = e.detail.column
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					this.columns[1] = this.city[this.cityIndex]
					this.columns[2] = this.area[this.cityIndex][0]
				} else if (columnIndex === 1) {
					this.columns[2] = this.area[this.cityIndex][this.areaIndex]
				}
			},
			bindPickerChange: function(e) {
				this.index = e.detail.value
				this.formData.relationship = this.array[e.detail.value]
			},

			bindMultiChange(e) {
				this.formData.nationality = this.countrydata[e.detail.value]
			},

			bindDateChange(e) { //选择出生日期
				this.formData.birthDate = e.detail.value
			},

			bindFamilyChange(e) {
				this.formData.nameFamily = this.familydata[e.detail.value]
			},
			handleAddrConfirm(e) {
				this.formData.addr = this.columns[0][e.detail.value[0]].label + ' ' + this.columns[1][e.detail.value[1]]
					.label +
					' ' + this.columns[2][e.detail.value[2]].label
			},
			bindCultureChange(e) {
				this.formData.culture = e.detail.value
			},
		}
	}
</script>

<style lang="scss">
	.item {
		padding: 0 20rpx;
		height: 70rpx;
		line-height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;


		input {
			text-align: right;
		}

		.item-radio {

			radio-group {
				display: flex;
			}

			/deep/uni-radio .uni-radio-input {
				width: 26rpx !important;
				height: 26rpx !important;
			}

			/deep/.uni-radio-input-checked {
				background: #FFFFFF !important;
				border: 1px solid #53B3D9 !important;
			}

			/deep/uni-radio .uni-radio-input.uni-radio-input-checked:before {
				color: #53B3D9 !important;
			}
		}
	}
</style>
